<template>
  <div>
    <el-row class="demo-autocomplete">
      <!-- <el-select v-model="select.classname" filterable placeholder="学生姓名" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <el-option v-for="(item,index) in select.classAll" :key="index" :value="item.cname" :label="item.cname"></el-option>
      </el-select> -->
      <el-input v-model="select.studentName" placeholder="姓名" clearable></el-input>
      <el-button type="primary" @click="searchTable">查找</el-button>
      <el-button type="danger" @click="resetTable">重置</el-button>
    </el-row>

    <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="username"
      label="学生用户名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系方式"
      width="180">
    </el-table-column>
    <el-table-column
      prop="remark"
      label="备注">
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        dialogFormVisible:false,
        select:{//用来存储下拉框相关数据
          studentName:'',
        },
        classAll:[],
        SubjectAll:[],//获取所有学科
        table:{

        },
        tableData:[],//用来展示每一次数据
        tableDataShow:[],//用来保存所有数据
      }
    },
    mounted() {
        axios.get(`http://42.193.219.14:8080/getClassByUid`,{
          headers: {"Authorization": "Bearer "+ sessionStorage.getItem('token')}
        }).then(
      response => {
        // console.log('班级信息请求成功', response.data.data);
        this.classAll=response.data.data;
        this.getStudent();
      });
    },
    methods: {
      getStudent(){
        this.classAll.forEach(element => {
            axios.get(`http://42.193.219.14:8080/getStudentByCid`,{
              headers: {"Authorization": "Bearer "+ sessionStorage.getItem('token')},
              params:{cid:element.cid}
            }).then(
            response => {
            this.tableDataShow=this.tableData=this.tableData.concat(response.data.data);
            });
        });
      },
      searchTable(){
        if(this.select.studentName!=''){
            // console.log('搜索'+this.select.studentName);
            this.tableData=this.filterArr(this.tableDataShow);
        }
        else {
            this.$message({
            type: 'warning',
            message: '班级名称不为空'
          });
        }
      },

      resetTable(){
        // console.log(this.tableData)
        // this.tableData=this.tableDataAll;//重新跟新
      },

      formatter(row) {
        return row.classname;
      },

       handleEdit(index, row) {
        // console.log(index, row);
      },

      handleDelete(index, row) {
        this.$confirm('将永久删除此班级, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.tableData=this.filterArr2(this.tableData,row)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },


      filterArr(datas,rowindex){//搜索框===数组的过滤
        return  datas.filter((data,index)=>{
          return (data.cname==this.select.classname);
          })
      },
      //目前都是假数据，没必要这么复杂，每套试卷都有唯一id
      filterArr2(datas,row){//删除===数组的过滤
        return  datas.filter((data,index)=>{
          return (data.classname!=row.classname||data.tag!=row.tag||data.name!=row.name||data.data!=row.data);
          })
      },
    }
  }
</script>



<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
    .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-input {
    margin: 10px;
    width: 20%;
  }
  .el-pagination {
    margin-left: 50%;
    margin-top: 10px;
    transform: translate(-50%);
  }
  .addclass{
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }
</style>
